<template>
	<div class="order-detail" v-loading="loading">
		<!-- <OrderDeliverDialog v-model="dialogVisible" :order-id="orderId" @submit="reloadFun" /> -->
		<el-row>
			<el-col :span="10">
				<el-form label-width="120px" class="demo-form-inline">
					<el-form-item label="订单状态：" style="width: 100%">
						<el-input
							disabled
							v-if="orderDetail.isReturn === NO_REFUND"
							placeholder="订单状态"
							clearable
							:value="getStatusText(orderDetail.orderStatus)"
						>
						</el-input>
						<el-input disabled v-else placeholder="订单状态" clearable :value="getRefundText(orderDetail.isReturn)"></el-input>
					</el-form-item>
					<el-form-item label="" style="width: 100%">
						<!-- 根据状态来判断是否显示 -->
						<el-button link type="primary" @click="dialogVisible = true">{{
							orderDetail.orderStatus === TO_BE_SHIPPED ? '去发货' : '查看物流'
						}}</el-button>
					</el-form-item>
					<el-form-item label="订单编号：" style="width: 100%">
						<el-input disabled placeholder="订单编号：" clearable :value="orderDetail.orderNo"></el-input>
					</el-form-item>
					<el-form-item label="支付渠道：" style="width: 100%">
						<el-input disabled placeholder="支付渠道" clearable :value="orderDetail.paymentChannel"></el-input>
					</el-form-item>
					<el-form-item label="支付时间：" style="width: 100%">
						<el-input disabled placeholder="支付时间" clearable :value="orderDetail.paymentTime"></el-input>
					</el-form-item>
					<el-form-item label="支付订单：" style="width: 100%">
						<el-input disabled placeholder="支付订单" clearable :value="orderDetail.paymentOrder"></el-input>
					</el-form-item>
					<el-form-item label="联系方式：" style="width: 100%">
						<el-input disabled placeholder="联系方式" clearable :value="orderDetail.contactInformation"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="2"></el-col>
			<el-col :span="10">
				<!-- 这里是收货地址,到时候使用地址的组件 -->
				<div class="address-content">
					<AddressItem :isHideLabel="true" :item="addressItemInfo" :defaultItem="defaultAddressItem" :loading="addressLoading" @submit="submit" />
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%">
					<el-table-column label="商品" width="500">
						<template #default="scope">
							<ProductItem :currencySymbol="orderDetail.currencySymbol" :item="scope.row.product" />
							<div v-if="scope.row.isReturn === REFUND_OCCURRED" class="total-box">
								<div class="product-h1">
									<b v-if="scope.row.etcList.length === 1 && scope.row.isAfterSale">{{ scope.row.etcList[0].etcLabel }}</b>
									{{ scope.row.isAfterSale ? '售后' : '商品' }}退款：{{ orderDetail.currencySymbol }}{{ orderDetail.returnPrice }}
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="length" label="数量"></el-table-column>
					<el-table-column prop="" label="单价">
						<template #default="scope">
							<div class="">{{ scope.row.price }}</div>
							<div v-for="(item, index) in scope.row.etcList" v-show="item.act.id !== 0" :key="`table-etc-item-${item.id}-${index}`" class="">
								{{ orderDetail.currencySymbol }}{{ item.act.price }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="300px">
						<template #default="scope">
							<div class="edit-content" v-if="scope.row.isReturn === NO_REFUND && orderDetail.orderStatus + `` !== PENDING_PAYMENT">
								<div class="edit-div">
									<div class="left-p">退货件数：</div>
									<div class="center-number">
										<el-input-number
											v-model="scope.row.reLength"
											:step="1"
											:controls="false"
											:min="1"
											:max="scope.row.length"
											controls-position="right"
										/>
									</div>
									<div class="right-btn"></div>
								</div>
								<div class="edit-div">
									<div class="left-p">退款金额：</div>
									<div class="center-number">
										<el-input-number
											v-model="scope.row.reMoney"
											:step="2"
											:controls="false"
											:min="0"
											:max="returnMaxMoney(scope.row)"
											controls-position="right"
										/>
									</div>
									<div class="right-btn">
										<el-button type="warning" :loading="returnGoodsBtnLoading" @click="beforeRefund(scope.row)">退款</el-button>
									</div>
								</div>
								<div
									v-for="(item, index) in scope.row.etcRefundList"
									v-show="item.act.id !== 0"
									:key="`table-etc-return-${item.id}-${index}`"
									class="edit-div"
								>
									<div class="left-p">{{ item.etcLabel }}退款金额：</div>
									<div class="center-number">
										<el-input-number v-model="item.returnPrice" :step="2" :controls="false" :min="0" :max="item.maxPrice" controls-position="right" />
									</div>
									<div class="right-btn">
										<el-button type="warning" :loading="item.loading" @click="beforeRefundByEtc(scope.row, scope.$index, index)">退款</el-button>
									</div>
								</div>
							</div>
							<div class v-if="scope.row.isReturn === REFUND_OCCURRED && orderDetail.orderStatus + `` !== PENDING_PAYMENT">
								<div class>{{ getReturnApplyStateText(scope.row.status) }}</div>
								<div class v-if="scope.row.status === RETURNAPPLY_PENDING || scope.row.status === RETURNAPPLY_IN_RETURN">
									<el-button
										type="warning"
										:loading="returnGoodsBtnLoading"
										@click="beforeUpdateReturnApply(scope.row)"
										v-if="scope.row.isReturn === REFUND_OCCURRED"
										>取消退款</el-button
									>
									<el-button
										type="primary"
										:loading="returnGoodsBtnLoading"
										@click="beforeConfirmRefund(scope.row)"
										v-if="scope.row.isReturn === REFUND_OCCURRED"
										>确认退款</el-button
									>
								</div>
								<!-- 退款中也要显示确认退款的按钮 -->
								<div class="" v-if="scope.row.status === RETURNAPPLY_REJECTED">
									<el-button type="primary" :loading="returnGoodsBtnLoading" @click="beforeConfirmRefund(scope.row)">再次退款</el-button>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop label="总价" width="250px">
						<template #default="scope">
							<div class="total-box">
								<div class="product-h1">{{ orderDetail.orderStatus + '' === PENDING_PAYMENT ? '待' : '实' }}付：{{ scope.row.paidIn }}</div>
								<div class="product-p">
									<div class="product-p-left">总价：</div>
									<div class="product-p-right">{{ scope.row.totalPrice }}</div>
								</div>
								<div class="product-p">
									<div class="product-p-left">邮费：</div>
									<div class="product-p-right">{{ scope.row.postage }}</div>
								</div>
								<div class="product-p">
									<div class="product-p-left">税费：</div>
									<div class="product-p-right">{{ scope.row.taxation }}</div>
								</div>
								<div class="product-p">
									<div class="product-p-left">优惠：</div>
									<div class="product-p-right">{{ scope.row.discount }}</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="订单备注"></el-table-column>
				</el-table>
			</el-col>
			<el-col :span="8">
				<div class v-if="activities.length > 0">
					<div class="order-h2">订单时间线：</div>
					<div class>
						<el-timeline>
							<el-timeline-item
								placement="top"
								v-for="(activity, index) in activities"
								:key="index"
								:timestamp="activity.timestamp"
								:color="activity.color"
							>
								<el-card>
									<div class="order-h4" :style="{ color: activity.color ? activity.color : null }">{{ activity.content }}</div>
									<p :style="{ color: activity.color ? activity.color : null }">{{ activity.timestamp }}</p>
								</el-card>
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
				<div class v-if="!isEmpty(orderDetail.logisticsCompany)">
					<div class="order-h2">发货信息：</div>
					<el-row align="middle">
						<el-col :span="24">
							<div class="line-box">
								<div class="line-left">物流公司：</div>
								<div class="line-right">
									<div class="text">{{ orderDetail.logisticsCompany }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="line-box">
								<div class="line-left">物流单号：</div>
								<div class="line-right">
									<div class="text">{{ orderDetail.logisticsOrderNo }}</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="4"></el-col>
			<el-col :span="12">
				<div class v-if="remarkList.length > 0">
					<div class="order-h2">备注：</div>
					<el-row align="middle" v-loading="remarkLoading">
						<el-col :span="24" v-for="(item, index) in remarkList" :key="`remark-item-${index}`">
							<div class="line-box">
								<div class="line-left">{{ getRetreatText(item.type) }}</div>
								<div class="line-right">
									<div class="text">{{ item.remark }}</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import ProductItem from '/@/components/product/ProductItem.vue';
import AddressItem from '/@/components/address/addressItem.vue';
import { useOrderApi } from '/@/api/order';
import orderState from '/@/utils/pageState/orderState';
import { timeFormat } from '/@/utils/filters';
import couponState from '/@/utils/pageState/couponState';
import { isEmpty } from '/@/utils';
import { getCityNameByShorthand } from '/@/utils/commonRequest';

// import { ENTERPRISE_STATION } from '/@/lib/config';

const ENTERPRISE_STATION = 'http://hkadmin.girlsaloud.cn/';

const { getCurrencySymbolTextBySite } = couponState();

const {
	getPayTypeText,
	getRefundText,
	getRetreatText,
	getReturnApplyStateText,
	getStatusText,
	NO_REFUND,
	PENDING_PAYMENT,
	REFUND_OCCURRED,
	RETURNAPPLY_COMPLETED,
	RETURNAPPLY_IN_RETURN,
	RETURNAPPLY_PENDING,
	RETURNAPPLY_REJECTED,
	TO_BE_SHIPPED,
} = orderState();
const { getOrderDetail, getOrderDetailByReturnApply, orderReturnApply, orderReturnApplyUpdate, updateOrder } = useOrderApi();

const emit = defineEmits(['update:orderId', 'update:isAfterSale', 'reloadList']);
const props = defineProps({
	orderId: {
		type: Number,
		default: 0,
	},
	isAfterSale: {
		type: Boolean,
		default: false,
	},
});
let orderDetail = ref({
	orderId: 0,
	orderStatus: '',
	orderNo: '',
	paymentChannel: '',
	paymentTime: '',
	paymentOrder: '',
	contactInformation: '',
	logisticsCompany: '',
	logisticsOrderNo: '',
	currencySymbol: '',
});
let dialogVisible = ref(false);
let tableData = ref([]);
let activities = ref([]);
let remarkList = ref([]);
let loading = ref(false);
let remarkLoading = ref(false);
let returnGoodsBtnLoading = ref(false);
let refundBtnLoading = ref(false);
// 地址需要保存2个，提交取新的地址，取消不做重新渲染
let addressLoading = ref(false);
const addressItemInfo = ref({});
const defaultAddressItem = ref({});

function init() {
	getData();
}

// 获取列表
async function getData() {
	addressLoading.value = true;
	loading.value = true;
	try {
		let params = {
			orderId: props.orderId,
		};
		let res = null;
		if (props.isAfterSale) {
			res = await getOrderDetailByReturnApply(params);
		} else {
			res = await getOrderDetail(params);
		}
		if (res.code !== 200) {
			addressLoading.value = false;
			loading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		addressLoading.value = false;
		loading.value = false;
		let tempList = [];
		let item = res.data;
		let list = [];
		if (props.isAfterSale) {
			list = item.orderReturnApplyList;
		} else {
			list = item.orderItemDetail;
		}
		// 商品相关详情的
		getDetail(item);
		// 地址的
		getAddressItem(item);
		// 列表的
		tempList = list.map((ceil) => {
			let etcList = [];
			let etcRefundList = [];
			let actList = JSON.parse(ceil.afterSales) || [];
			if (actList instanceof Array && actList.length > 0 && actList[0].etcActList instanceof Array) {
				etcList = actList[0].etcActList;
			}
			let quantity = ceil.productQuantity ? ceil.productQuantity : ceil.productCount;
			for (let index = 0; index < etcList.length; index++) {
				let element = etcList[index];
				etcRefundList.push({
					id: element.id,
					etcLabel: element.etcLabel,
					act: element.act,
					maxPrice: element.act.price * quantity || 0,
					minPrice: 0,
					returnPrice: 0,
					loading: false,
				});
			}
			orderDetail.value.currencySymbol = getCurrencySymbolTextBySite(item.sourceType);
			return {
				id: ceil.id,
				product: {
					id: ceil.productId,
					url: ceil.productPic,
					quantity,
					title: ceil.productName,
					link: ENTERPRISE_STATION + 'detail?thirdCate=' + ceil.productCategoryId + '&prod=' + ceil.productId,
					sku: ceil.productSkuCode ? ceil.productSkuCode : ceil.productSkuId,
					// 拿到售后的列表
					etcList,
				},
				length: quantity,
				price:
					getCurrencySymbolTextBySite(item.sourceType) +
					ceil.price +
					`(${orderDetail.value.orderStatus + '' === PENDING_PAYMENT ? '待' : '实'}付${getCurrencySymbolTextBySite(item.sourceType)}${
						ceil.productRealPrice ? ceil.productRealPrice : ceil.payAmount
					})`,
				priceValue: ceil.price,
				realPayment: ceil.payAmount,
				paidIn: getCurrencySymbolTextBySite(item.sourceType) + item.payAmount,
				totalPrice: getCurrencySymbolTextBySite(item.sourceType) + item.totalAmount,
				postage: getCurrencySymbolTextBySite(item.sourceType) + 0,
				taxation: getCurrencySymbolTextBySite(item.sourceType) + 0,
				discount: getCurrencySymbolTextBySite(item.sourceType) + (item.promotionAmount ? item.promotionAmount : item.couponAmount),
				remark: item.note,
				logisticsCompany: 0,
				logisticsOrderNo: '',
				reLength: 0,
				reMoney: 0,
				isReturn: ceil.isReturn ? ceil.isReturn : item.isReturn,
				status: ceil.status,
				etcList,
				etcRefundList,
				isAfterSale: ceil.isAfterSale,
			};
		});
		tableData.value = tempList;
		// 退货退款的列表的
		getRemarkListFun(list);
	} catch (error) {
		addressLoading.value = false;
		loading.value = false;
	}
}

// 设置详情
function getDetail(item) {
	orderDetail.value = {
		orderId: props.orderId,
		orderStatus: item.status,
		orderNo: item.orderSn,
		paymentChannel: getPayTypeText(item.payType),
		paymentTime: timeFormat(item.createTime),
		paymentOrder: item.paymentId,
		contactInformation: item.billReceiverEmail,
		logisticsCompany: item.deliveryCompany,
		logisticsOrderNo: item.deliverySn,
		isReturn: item.isReturn,
		currencySymbol: '',
		returnPrice: item.returnPrice,
	};

	let tempActivities = [];

	for (const key in item.timeLineMap) {
		if (Object.prototype.hasOwnProperty.call(item.timeLineMap, key)) {
			const element = item.timeLineMap[key];
			tempActivities.push({
				content: key,
				timestamp: element,
				color: '#0bbd87',
			});
		}
	}
	activities.value = tempActivities;
}

// 获取订单地址
function getAddressItem(item) {
	addressItemInfo.value = {
		id: item.id,
		isDefault: false,
		label: '',
		firstName: item.receiverName,
		lastName: item.receiverLastName,
		address: item.receiverDetailAddress,
		city: item.receiverCity,
		countryValue: item.receiverProvince,
		countryLabel: getCityNameByShorthand(item.receiverProvince),
		postCode: item.receiverPostCode,
		phone: item.receiverPhone,
	};
	defaultAddressItem.value = {
		id: item.id,
		isDefault: false,
		label: '',
		firstName: item.receiverName,
		lastName: item.receiverLastName,
		address: item.receiverDetailAddress,
		city: item.receiverCity,
		countryValue: item.receiverProvince,
		countryLabel: getCityNameByShorthand(item.receiverProvince),
		postCode: item.receiverPostCode,
		phone: item.receiverPhone,
	};
}

// 表格的合并
function arraySpanMethod(data) {
	if (data.columnIndex === 4 || data.columnIndex === 5 || data.columnIndex === 6) {
		return {
			rowspan: tableData.value.length, // 这里的rowspan使用获取到产品数量
			colspan: 1,
		};
	}
}

// 退款弹窗
function beforeRefund(item) {
	if (refundBtnLoading.value) {
		return;
	}
	if (item.reMoney === 0) {
		return;
	}
	ElMessageBox.prompt('请填写退款原因', '订单退款', {
		confirmButtonText: '提交',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '退款原因不能为空',
	})
		.then(({ value }) => {
			refundFun(item, value);
			// ElMessage({
			//     type: "success",
			//     message: `Your email is:${value}`,
			// });
		})
		.catch(() => {
			// ElMessage({
			//     type: "info",
			//     message: "Input canceled",
			// });
		});
}

// 售后的退款弹窗
function beforeRefundByEtc(item, itemIndex, etcIndex) {
	let etcPrice = item.etcRefundList ? item.etcRefundList[etcIndex].returnPrice : 0;
	if (etcPrice === 0) {
		return;
	}
	let etcLabel = item.etcRefundList ? item.etcRefundList[etcIndex].etcLabel : '';
	ElMessageBox.prompt(`请填写${etcLabel}退款原因`, '订单退款', {
		confirmButtonText: '提交',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '退款原因不能为空',
	})
		.then(({ value }) => {
			refundEtcFun(item, value, itemIndex, etcIndex);
			// ElMessage({
			//     type: "success",
			//     message: `Your email is:${value}`,
			// });
		})
		.catch(() => {
			// ElMessage({
			//     type: "info",
			//     message: "Input canceled",
			// });
		});
}

// 返回
function cancel() {
	emit('reloadList');
	emit('update:orderId', -1);
}

// 返回最大输入的金额
function returnMaxMoney(item) {
	let l = item.length ? Number(item.length) : 0,
		m = item.priceValue ? Number(item.priceValue) : 0;
	let etcM = 0;
	if (item.etcList) {
		for (let index = 0; index < item.etcList.length; index++) {
			let element = item.etcList[index];
			etcM += Number(element.act.price);
		}
	}
	let re = item.realPayment;
	if (!re) {
		re = (m + etcM) * l;
	}
	return re;
}

// 修改退货订单弹窗
function beforeUpdateReturnApply(item) {
	if (refundBtnLoading.value) {
		return;
	}
	ElMessageBox.prompt('', '取消退款原因', {
		confirmButtonText: '提交',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '退款原因不能为空',
	})
		.then(({ value }) => {
			updateReturnApply(item, value);
			// ElMessage({
			//     type: "success",
			//     message: `Your email is:${value}`,
			// });
		})
		.catch(() => {
			// ElMessage({
			//     type: "info",
			//     message: "Input canceled",
			// });
		});
}

// 确认收款弹窗
function beforeConfirmRefund(item) {
	if (refundBtnLoading.value) {
		return;
	}
	ElMessageBox.prompt('', '是否确认退款', {
		confirmButtonText: '提交',
		cancelButtonText: '取消',
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputErrorMessage: '退款原因不能为空',
	})
		.then(({ value }) => {
			confirmRefund(item, value);
			// ElMessage({
			//     type: "success",
			//     message: `Your email is:${value}`,
			// });
		})
		.catch(() => {
			// ElMessage({
			//     type: "info",
			//     message: "Input canceled",
			// });
		});
}

// 获取退货退款的列表的
async function getRemarkListFun(list) {
	remarkLoading.value = true;
	try {
		let tempRemarkList = [];
		for (let index = 0; index < list.length; index++) {
			const element = list[index];
			if (!isEmpty(element.reason)) {
				tempRemarkList.push({
					type: 1,
					remark: element.reason,
				});
			}
		}
		remarkList.value = tempRemarkList;
		remarkLoading.value = false;
	} catch (error) {
		remarkLoading.value = false;
	}
}

// 商品退款
async function refundFun(item, value) {
	refundBtnLoading.value = true;
	let params = {
		orderId: props.orderId,
		idLists: [item.id],
		productCount: item.reLength,
		reason: value,
		description: '',
		returnAmount: item.reMoney,
		isAfterSale: 0,
	};
	try {
		let res = await orderReturnApply(params);
		if (res.code !== 200) {
			refundBtnLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		refundBtnLoading.value = false;
		ElMessage({
			type: 'success',
			message: '退款操作成功',
		});
		// emit("update:isAfterSale", true);
		init();
	} catch (error) {
		refundBtnLoading.value = false;
		ElMessage({
			type: 'error',
			message: '退款操作失败',
		});
	}
}

// 额外信息的退款
async function refundEtcFun(item, value, itemIndex, etcIndex) {
	let etcItem = item.etcRefundList;
	if (!etcItem) {
		return;
	}
	let afterSales = [];
	if (item.etcList) {
		let changeItem = item.etcList[etcIndex];
		changeItem.act.price = etcItem[etcIndex].returnPrice;
		afterSales.push({
			etcActList: [changeItem],
		});
	}
	etcItem[etcIndex].loading = true;
	let params = {
		orderId: props.orderId,
		idLists: [item.id],
		productCount: item.reLength,
		reason: value,
		description: '',
		returnAmount: item.reMoney,
		isAfterSale: 1,
		afterSales,
	};
	try {
		let res = await orderReturnApply(params);
		if (res.code !== 200) {
			etcItem[etcIndex].loading = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		etcItem[etcIndex].loading = false;
		ElMessage({
			type: 'success',
			message: '退款操作成功',
		});
		// emit("update:isAfterSale", true);
		init();
	} catch (error) {
		etcItem[etcIndex].loading = false;
		ElMessage({
			type: 'error',
			message: '退款操作失败',
		});
	}
}

// 修改退货订单
async function updateReturnApply(item, value) {
	refundBtnLoading.value = true;
	let params = {
		id: item.id,
		status: RETURNAPPLY_REJECTED,
		reason: value,
	};
	try {
		let res = await orderReturnApplyUpdate(params);
		if (res.code !== 200) {
			refundBtnLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		refundBtnLoading.value = false;
		ElMessage({
			type: 'success',
			message: `取消${item.product.title}退款操作成功`,
		});
		// emit("update:isAfterSale", false);
		init();
	} catch (error) {
		refundBtnLoading.value = false;
		ElMessage({
			type: 'error',
			message: '取消操作失败',
		});
	}
}

// 退款
async function confirmRefund(item, value) {
	refundBtnLoading.value = true;
	let params = {
		id: item.id,
		status: RETURNAPPLY_COMPLETED,
		reason: value,
	};
	try {
		let res = await orderReturnApplyUpdate(params);
		if (res.code !== 200) {
			refundBtnLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		refundBtnLoading.value = false;
		ElMessage({
			type: 'success',
			message: `确认退款操作成功`,
		});
		// emit("update:isAfterSale", false);
		init();
	} catch (error) {
		refundBtnLoading.value = false;
		ElMessage({
			type: 'error',
			message: '确认退款操作失败',
		});
	}
}

// 更新订单
async function submit(item) {
	console.log('0-0------', item);
	addressLoading.value = true;
	try {
		let params = {
			orderId: props.orderId,
			receiverName: item.firstName,
			receiverLastName: item.lastName,
			receiverPhone: item.phone,
			receiverPostCode: item.postCode,
			receiverProvince: item.countryValue,
			receiverCity: item.city,
			receiverDetailAddress: item.address,
		};
		let res = null;
		res = await updateOrder(params);

		if (res.code !== 200) {
			addressLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		addressLoading.value = false;
		ElMessage({
			type: 'success',
			message: '保存成功！',
		});
		init();
	} catch (error) {
		addressLoading.value = false;
		ElMessage({
			type: 'error',
			message: '保存失败',
		});
	}
}
onMounted(() => {
	init();
});
</script>

<style lang="scss" scoped>
.order-detail {
	position: relative;
	.back-btn {
		display: flex;
		justify-content: flex-end;
	}
	.order-h1 {
		font-size: 40px;
		padding-bottom: 20px;
	}
	.order-h2 {
		font-size: 24px;
		padding-bottom: 20px;
		padding-top: 20px;
	}
	.order-h4 {
		font-size: 20px;
		padding-bottom: 10px;
	}
	.line-box {
		padding-bottom: 18px;
		font-size: 16px;
		display: flex;
		.line-left {
			width: 100px;
			display: flex;
			align-items: center;
			font-size: 16px;
		}
		.line-right {
			flex: 1;
			display: flex;
			align-items: center;
			.order-state {
				font-size: 20px;
				color: green;
				padding-right: 50px;
			}
			.order-state-btn {
			}
			.text {
				font-size: 16px;
			}
		}
	}

	.address-title {
		font-size: 20px;
		padding-bottom: 20px;
	}
	.address-content {
		padding-bottom: 20px;
	}
	.total-box {
		text-align: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		.product-h1 {
			font-size: 24px;
			font-weight: bold;
			padding-bottom: 10px;
			text-align: center;
		}
		.product-p {
			width: 120px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.product-p-left {
				width: 60px;
				text-align: left;
			}
			.product-p-right {
				flex: 1;
				text-align: right;
			}
		}
	}
	.edit-content {
		display: flex;
		flex-direction: column;
		.edit-div {
			display: flex;
			width: 100%;
			align-items: center;
			margin: 5px 0;
			.left-p {
				width: 100px;
			}
			.center-number {
				flex: 1;
			}
			.right-btn {
				width: 120px;
				display: flex;
				overflow: hidden;
				:deep(.el-button) {
					width: 100%;
					margin-left: 5px;
				}
			}
		}
	}
}
</style>
